<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">门禁地图</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :api="getMapTree" :params="{ mapType: 0 }" :show-code="showCode" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="header">
          <div class="title">{{ mapName }}</div>
          <!-- <div class="handerBar">
            <el-button type="primary" plain :icon="Notebook" @click="dialogVisible = true">开锁记录</el-button>
          </div> -->
        </div>
        <div class="table-box" v-loading="loading">
          <SearchForm
            :search="_search"
            :reset="_reset"
            :search-param="searchParam"
            :columns="columns"
            :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
          />
          <div class="doorList" v-if="doorMapList.length">
            <div :class="['doorItem']" v-for="item in doorMapList" :key="item.gatewayId">
              <div class="doorHeader">
                <div class="doorHeader__con">
                  <div class="signal"></div>
                  <div class="electricity">{{ item.electricity }}</div>
                </div>
                <!-- <div class="onlineStatus">{{ onlineStatusList[item.doortype] }}</div> -->
              </div>
              <div class="door">
                <div class="doorInner">
                  <div class="doorNo">
                    <div v-for="val in item.doorname" :key="val">{{ val }}</div>
                  </div>
                  <!-- <div class="doorHandler"></div> -->
                </div>
              </div>
              <el-button type="primary" link :icon="Unlock" style="color: #ffffff" @click="_unlock(item.doorsn)"
                >短时开锁</el-button
              >
            </div>
          </div>
          <div class="noData" v-else>暂无数据</div>
          <div class="footer">
            <Pagination
              :pageable="pageable"
              :handle-size-change="handleSizeChange"
              :handle-current-change="handleCurrentChange"
              :small="true"
            />
          </div>
        </div>
      </div>
    </div>
    <UnlockRecord
      :dialogVisible="dialogVisible"
      :handleClose="
        () => {
          dialogVisible = false;
        }
      "
      :mapndx="mapId"
    />
  </div>
</template>

<script setup lang="tsx" name="deviceMonitor">
/* eslint-disable */
// @ts-nocheck
import { onMounted, provide, Ref, ref, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import ZTree from "@/components/ZTree/index.vue";
import UnlockRecord from "./components/UnlockRecord.vue";
import { getMapTree } from "@/api/modules/common";
import { getDoorList, unlock } from "@/api/modules/accessControl/control/remoteControl";
import { Unlock, Notebook } from "@element-plus/icons-vue";
import { connectStatus } from "@/utils/serviceDict";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { ColumnProps } from "@/components/ProTable/interface";

const treeId = ref("tree");
const showCode = ref(false);
const dialogVisible = ref(false);
const loading = ref(false);
const ids = ref([]);
const mapIds = ref([]);
const mapId = ref("");
const mapName = ref("");
const doorMapList = ref([]);
const onlineStatusList = ["未入网", "离线", "在线"];
const columns: any = ref([
  {
    prop: "clause",
    label: "门禁",
    search: { el: "input" }
  }
  // {
  //   prop: "onlineStatus",
  //   label: "连接状态",
  //   enum: connectStatus,
  //   search: { el: "select" }
  // },
  // {
  //   prop: "electricityMin",
  //   label: "最小电量",
  //   search: { el: "input" }
  // },
  // {
  //   prop: "electricityMax",
  //   label: "最大电量",
  //   search: { el: "input" }
  // }
]);

const searchParam = ref({
  clause: "",
  connectStatus: "",
  electricityMin: "",
  electricityMax: ""
});

const pageable = ref({
  // 当前页数
  pageNum: 1,
  // 每页显示条数
  perPageNum: 100,
  // 总条数
  total: 0
});

/**
 * 搜索
 */
const _search = () => {
  getDoorData();
};

/**
 * 搜索重置
 */
const _reset = () => {
  searchParam.value = {
    clause: "",
    connectStatus: "",
    electricityMin: "",
    electricityMax: ""
  };
  getDoorData();
};

/**
 * 短时开锁
 */
const _unlock = async doorsn => {
  try {
    await unlock({
      list: ids.value.length ? ids.value : [doorsn],
      iParam1: 60 //timeup
    });
    ElMessage.success("开锁成功");
  } catch (error) {
    console.log(error);
  }
};

/**
 * 分页页数切换
 */
const handleCurrentChange = val => {
  pageable.value.pageNum = val;
  getDoorData();
};

/**
 * 分页条数切换
 */
const handleSizeChange = val => {
  pageable.value.perPageNum = val;
  getDoorData();
};

/**
 * 获取房间列表
 */
const getDoorData = async () => {
  try {
    const res = await getDoorList({
      mapIds: mapIds.value,
      pageNum: pageable.value.pageNum,
      perPageNum: pageable.value.perPageNum,
      ...searchParam.value,
      doorType: 0
    });
    let { page, records } = res.data;
    loading.value = false;
    pageable.value.total = page.total;
    records = records.map(item => {
      return {
        ...item,
        doorname: item.doorname.indexOf("-") != -1 ? item.doorname.split("-") : [item.doorname]
      };
    });
    doorMapList.value = records;
  } catch (error) {
    console.log(error);
  }
};

/**
 * 展开树
 */
const getFlatMapData = (list: any) => {
  let newList = JSON.parse(JSON.stringify(list));
  return newList.flatMap((item: any) => [item, ...(item.children ? getFlatMapData(item.children) : [])]);
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode, ids }) {
  mapIds.value = ids;
  mapId.value = treeNode.id;
  mapName.value = treeNode.name;
  loading.value = true;
  pageable.value.pageNum = 1;
  getDoorData();
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
